import Guide from '@/components/Guide';
import { trim } from '@/utils/format';
import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { useState } from 'react';
import styles from './index.less';

interface Item {
  text: string | undefined;
  name: string | undefined;
}

const HomePage: React.FC = () => {
  const { name } = useModel('global');
  const [obj, setObj] = useState({
    text: undefined,
    name: undefined,
  });
  const [list, setList] = useState<Item[]>([]);

  function handleUpdate() {
    setList((prevList) => [...prevList, { text: obj.text, name: obj.name }]);
  }

  function handleDel(index: number) {
    setList((prevList) => prevList.filter((_, idx) => idx !== index));
  }

  return (
    <PageContainer ghost>
      <div className={styles.container}>
        <label htmlFor="">文字</label>
        <input
          type="text"
          value={obj.text}
          onInput={(value) => setObj({ ...obj, text: value.target!.value })}
        />
        <label htmlFor="">姓名</label>
        <input
          type="text"
          value={obj.name}
          onInput={(value) => setObj({ ...obj, name: value.target!.value })}
        />
        <button onClick={handleUpdate} type="button">
          增加
        </button>
        {list.map((item, index) => (
          <div key={item.text}>
            <div>
              {index + 1}.{item.name}
              {item.text}
            </div>
            <button onClick={() => handleDel(index)} type="button">
              删除
            </button>
          </div>
        ))}
        <Guide name={trim(name)} />
      </div>
    </PageContainer>
  );
};

export default HomePage;
